<template>
    <div>
        <el-row style="height: 100%">
            <el-col :span="6" class="placeholder">
            </el-col>
            <el-col :span="16" style="margin-top: 20px">
                <el-form :model="baseInfo" :rules="rules" ref="baseRef" :spellcheck="false" @submit.native.prevent
                    :validate-on-rule-change="false">
                    <el-col :span="12">
                        <el-form-item label="任务名称" prop="jobDesc">
                            <el-input v-model="baseInfo.jobDesc" class="input-auto-resize" maxlength="100" />
                        </el-form-item>
                        <el-form-item label="创建人" prop="author" class="area-input">
                            <el-select v-model="baseInfo.author" placeholder="请选择" class="input-auto-resize">
                                <el-option v-for="item in authors" :key="item.sequence" :label="item.username"
                                    :value="item.username">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="JobHandler" prop="executorHandler" class="area-input" v-if="!type">
                            <el-input v-model="baseInfo.executorHandler" class="input-auto-resize" />
                        </el-form-item>
                        <el-form-item label="报警邮件" prop="alarmEmail" class="area-input">
                            <el-input v-model="baseInfo.alarmEmail" type="textarea" class="font-auto-resize"
                                resize="none" :rows="5" />
                        </el-form-item>
                        <el-form-item label="正文" prop="msg" v-if="false">
                            <el-input v-model="baseInfo.msg" class="input-auto-resize" type="textarea" resize="none"
                                :rows="5" maxlength="200" :spellcheck="false" />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark" v-if="false">
                            <el-input v-model="baseInfo.remark" type="textarea" resize="none" :rows="5" maxlength="200"
                                :spellcheck="false" />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { useRequest } from "@usehook"
import storeInstance from "@/pinia"

const props = defineProps({
    type: {
        type: String,
        default: ""
    }
})

let baseInfo = $ref({
    jobDesc: '',
    alarmEmail: '',
    author: storeInstance.userStore.getUserInfo.username,
    msg: '',
    remark: '',
    executorHandler: ''
})
let authors = $ref([])

const rules = $computed(() => {
    if (props.type) {
        return {
            jobDesc: [
                { required: true, message: '任务名称不能为空', trigger: [] }
            ],
            author: [
                { required: true, message: '负责人不能为空', trigger: [] }]
        }
    } else {
        return {
            jobDesc: [
                { required: true, message: '任务名称不能为空', trigger: [] },
            ],
            author: [
                { required: true, message: '负责人不能为空', trigger: [] }],
            executorHandler: [
                { required: true, message: 'jobHandler不能为空', trigger: [] },
            ]
        }
    }
})

const baseRef = $ref(null)
const validate = () => {
    return baseRef.validate().catch((() => {
        return false
    }))
}
const save = () => {
    return baseInfo
}
const fill = (data) => {
    for (let i in data) {
        baseInfo[i] = data[i]
    }
}

onMounted(() => {
    useRequest({
        'url': '/user/list/getData', 'search': JSON.stringify({ status: '1' }),
        'limit': 1000,
        'page': 1
    }).then(r => {
        authors = r.data
    }).catch(_ => _);
})

defineExpose({ validate, save, fill })
</script>

<style scoped>
:deep(.el-form-item) {
    margin-bottom: 15px;
}

:deep(.el-form-item__label) {
    width: calc(var(--font-size) * 5 + 20px)
}
</style>

<style>
.dialog .el-dialog__header {
    padding-bottom: 0 !important;
}

.dialog.el-dialog {
    padding-bottom: 9px;
}

.dialog .el-dialog__footer {
    padding-top: 10px;
}
</style>